<template>
	<view>
		<view class="mt-5" v-if="u_loadmore">
			<u-loadmore status="loading" icon-type="circle" />
		</view>
		<view v-else>
			<view class="m-2 bg-white rounded-20">
				<view class="border-bottom">
					<view class="d-flex p-3" v-for="(item,index) in confirm_detail.goods_items">
						<image class="today_hot" src="../../static/images/goods/icon_footer_orders_active.png" mode=""></image>
						<view class="ml-2 flex-1 my-2">
							<view class="ellipsis order_name">{{item.name}}</view>
							<view class="">
								<view class="text-999 font-28">属性:500g</view>
								<view class=" d-flex j-sb">
									<view class="font-weight font-28">
										{{item.formated_shop_price}}
									</view>
									<view class="font-28">x{{item.goods_number}}</view>
								</view>	
							</view>
						</view>
					</view>	
				</view>
				<view class="text-right p-3">
					共<text>{{confirm_detail.goods_items.length}}</text>件，合计:<text class="font-lg font-weight">{{confirm_detail.formated_total_fee}}</text>
				</view>
			</view>
			<view class="m-2 px-3 py-2 rounded-20 bg-white beizhu">
				<textarea v-model="comment_order" placeholder="请输入操作备注..."  @input="comment_change" maxlength="139"></textarea>
				<view class=" text-right text-999">{{comment_lenght}}/140</view>
			</view>
		</view>
		<view class="footer"></view>
		<view class="bg-white py-2 w-100 position-fixed bottom-0 btn">
			<button type="warn" @click="confirm_payment">确定付款</button>
		</view>
		
		<u-modal :show-title="false" :show-cancel-button='false' confirm-text='好的' v-model="comment_show" >
			<view class="py-5 text-center font-35">请填写操作备注</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				confirm_detail:"",
				order_id:"", // 订单ID
				comment_order:"", // 
				comment_lenght:0, // 备注长度
				comment_show:false,
				u_loadmore:true, // 加载中
			}
		},
		onLoad(e) {
			this.$H.post("admin/orders/detail",{id:e.order_id}).then(res=>{
				if(res.status.succeed == 1){
					this.order_id=e.order_id
					this.confirm_detail=res.data
					this.u_loadmore=false 
				}	
			})
		},
		methods: {
			// 备注
			comment_change(e){
				this.comment_lenght=e.detail.cursor
				this.comment_order=e.detail.value
			},
			// 确认付款
			confirm_payment(){
				if(this.comment_order==""){
					this.comment_show=true
				}else{
					this.$H.post("admin/order/operate/pay",{
						order_id:this.order_id,
						action_note:this.comment_order
					}).then(res=>{
						console.log(res)
						uni.navigateBack({
							delta:1
						})
					})
				}
			}
		}
	}
</script>

<style>
	.user_img{
		width: 40upx;
		height: 40upx;
		background-color: #ffd1d0;
	}
	.today_title{
		background-color: #f6efef;
		border-radius: 20upx 20upx 0 0;
	}
	.today_hot{
		width: 180upx;
		height: 180upx;
	}
	.btn /deep/ button{
		width: 85%;
		font-weight: 700;
		border-radius: 50upx;
		background: linear-gradient(to right,#F31E3E,#FB4F37);
	}
	textarea{
		height: 200upx;
	}
	.order_name{
		height: 90upx;
	}
</style>
